<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>我的订单</p>
		</header>
		<!-- 订单列表部分 -->
		<h3>未支付订单信息：</h3>
		<ul class="order">
			<li v-for="(order, index) in orderNoPay" :key="index">
				<div class="order-info">
					<p>
						{{ order.business.businessName }}
						<i class="fa fa-caret-down"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{ order.orderTotal }}</p>
						<div class="order-info-right-icon">去支付</div>
					</div>
				</div>
				<ul class="order-detailet">
					<li v-for="f in order.list" :key="f.foodId">
						<p>{{ f.food.foodName }} x {{ f.quantity }}</p>
						<p>&#165;{{ f.food.foodPrice }}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{ order.business.deliveryPrice }}</p>
					</li>
				</ul>
			</li>
		</ul>
		<h3>已支付订单信息：</h3>
		<ul class="order">
			<li v-for="(order, index) in orderPaied" :key="index">
				<div class="order-info">
					<p>
						{{ order.business.businessName }}
						<i class="fa fa-caret-down"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{ order.orderTotal }}</p>
					</div>
				</div>
				<ul class="order-detailet">
					<li v-for="f in order.list" :key="f.foodId">
						<p>{{ f.food.foodName }} x {{ f.quantity }}</p>
						<p>&#165;{{ f.food.foodPrice }}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{ order.business.deliveryPrice }}</p>
					</li>
				</ul>
			</li>
		</ul>
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
	name: 'OrderList',
	components: {
		Footer
	},
	data() {
		return {
			orderPaied: [],
			orderNoPay: [],
			// isShow: false
		}
	},
	async created() {
		let user = this.$sessionGet();
		// console.log(user);
		if(user!=null){
			await this.listOrdersByUserId(user.userId);
		}
	},
	methods: {
		async listOrdersByUserId(userId) {
			// 请求订单详细信息
			// console.log(userId);
			let url = 'OrdersController/listOrdersDetailByUserId?userId=' + userId;
			let { data } = await this.$axios.get(url);

			for(let order of data){
				if (order.orderState == 0) {
					this.orderNoPay.push(order);
				} else {
					this.orderPaied.push(order);
				}
			}
		}
	}
}
</script>

<style scoped="scoped">
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 历史订单列表部分 ******************/
.wrapper h3 {
	margin-top: 12vw;
	box-sizing: border-box;
	padding: 4vw;
	font-size: 4vw;
	font-weight: 300;
	color: #999;
}

.wrapper .order {
	width: 100%;
}

.wrapper .order li {
	width: 100%;
}

.wrapper .order li .order-info {
	box-sizing: border-box;
	padding: 2vw 4vw;
	font-size: 4vw;
	color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order li .order-info .order-info-right {
	display: flex;
}

.wrapper .order li .order-info .order-info-right .order-info-right-icon {
	background-color: #f90;
	color: #fff;
	border-radius: 3px;
	margin-left: 2vw;
	user-select: none;
	cursor: pointer;
}

.wrapper .order li .order-detailet {
	width: 100%;
}

.wrapper .order li .order-detailet li {
	width: 100%;
	box-sizing: border-box;
	padding: 1vw 4vw;
	color: #666;
	font-size: 3vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
